<template>
    <div class="turnAgentAnalyze">
        <div class="header flexbetween">
            <div class="flex-center">
                <span class="title">数据范围</span>
                <el-radio-group v-model="time" size="small" class="mr20" @change="radioTimeChange">
                    <el-radio-button label="0">今天</el-radio-button>
                    <el-radio-button label="1">昨天</el-radio-button>
                    <el-radio-button label="7">近一周</el-radio-button>
                    <el-radio-button label="30">近30天</el-radio-button>
                </el-radio-group>
                <el-date-picker class="mr20" v-model="date" size="small" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions" @change="dateRangeChange">
                </el-date-picker>
                <div class="mr20">渠道入口</div>
                <a-select v-model="sourceIds" style="width: 300px" mode="multiple"
                          :getPopupContainer="triggerNode => { return triggerNode.parentNode }">
                    <a-select-option v-for="source in sourceList" :key="source.id" :value="source.id">
                        {{ source.sourceName }}
                    </a-select-option>
                </a-select>
            </div>
            <span class="hint">仅支持查询近90天的数据</span>
        </div>
        <div class="card mb20">
            <div class="card-header flexbetween">
                <span class="title">转人工趋势图</span>
                <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                    <span class="iconfont icon-xiazai"></span>
                </el-tooltip>
            </div>
            <div class="card-body" style="height: 380px">
                <echarts :optionData="lineOption"></echarts>
            </div>
        </div>
        <div class="flexbetween betweenCard">
            <div class="card">
                <div class="card-header flexbetween">
                    <span class="title">转人工方式统计</span>
                    <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                        <span class="iconfont icon-xiazai"></span>
                    </el-tooltip>
                </div>
                <div class="card-body" style="height: 400px;">
                    <echarts :optionData="pieOption" @chartClick="chartClick"></echarts>
                </div>
            </div>
            <div class="card">
                <div class="card-header flexbetween">
                    <span class="title">转人工技能组统计</span>
                    <el-tooltip effect="light" content="下载" placement="top" :enterable="false">
                        <span class="iconfont icon-xiazai"></span>
                    </el-tooltip>
                </div>
                <div class="card-body" style="height: 400px">
                    <echarts :optionData="pieOption"></echarts>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from "@/components/Echarts";
import { getPieOption, getLineColumnOption } from "@/components/Echarts/option";
import { initFilterTime } from "@/utils/index";
import { mapGetters } from "vuex";
export default {
    name: "turnAgentAnalyze",
    data() {
        return {
            time: "0",
            date: "",
            sourceIds: [],
            pickerOptions: {
                disabledDate(time) {
                    let curDate = new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
                    let three = 90 * 24 * 3600 * 1000;
                    let threeMonths = curDate - three;
                    return time.getTime() > curDate || time.getTime() < threeMonths;;
                }
            },
            lineOption: {},
            pieOption: {}
        }
    },
    methods: {
        getChartData() {
            let lineOption = {
                legend: { data: ['接待量', '转人工次数', '机器人触发转人工次数', '转人工成功次数', '成功转人工率'] },
                xAxis: [{ data: ['4/02', '4/03', '4/04', '4/05', '4/06', '4/07', '4/08'] }],
                yAxis: [{ name: '次数' }, { name: '成功转人工率' }],
                series: [
                    {
                        name: '接待量',
                        type: 'line',
                        color: "#FF9A84",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(255, 154, 132,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: [10, 0, 56, 23, 98, 45, 30]
                    },
                    {
                        name: '转人工次数',
                        type: 'line',
                        yAxisIndex: 1,
                        color: "#6B5EE2",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(142, 121, 255,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: [20, 90, 35, 60, 15, 39, 48]
                    },
                    {
                        name: '机器人触发转人工次数',
                        type: 'line',
                        yAxisIndex: 1,
                        color: "#678DF9",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(14, 184, 216,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: [50, 74, 60, 23, 5, 40, 79]
                    },
                    {
                        name: '转人工成功次数',
                        type: 'line',
                        yAxisIndex: 1,
                        color: "#0EB8D8",
                        lineStyle: { width: 3 },
                        symbol: 'circle',
                        symbolSize: 10,
                        emphasis: {
                            scale: false,
                            itemStyle: {
                                borderColor: 'rgba(14, 184, 216,0.2)',
                                borderWidth: 15,
                            }
                        },
                        data: [78, 90, 12, 56, 45, 88, 79]
                    },
                    {
                        name: '成功转人工率',
                        type: 'bar',
                        color: "#537EF7",
                        itemStyle: {
                            borderRadius: [6, 6, 0, 0] //柱状图圆角
                        },
                        barWidth: 30,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '%';
                            }
                        },
                        data: [20, 90, 50, 60, 10, 40, 30],
                    },
                ]
            };
            this.lineOption = getLineColumnOption(lineOption);
        },
        getPieData() {
            let pieOption = {
                series: [
                    {
                        data: [
                            { value: 1048, name: '渠道1' },
                            { value: 735, name: '渠道2' },
                            { value: 580, name: '渠道3' },
                            { value: 484, name: '渠道4' },
                            { value: 300, name: '渠道5' }
                        ]
                    }
                ]
            };
            this.pieOption = getPieOption(pieOption);
        },
        radioTimeChange(val) {
            this.date = initFilterTime(val);
        },
        dateRangeChange() {
            this.time = "";
        },
        chartClick(data) {
            console.log(data);
        }
    },
    created() {
        this.date = initFilterTime(0);
        this.getChartData();
        this.getPieData();
    },
    computed: {
        ...mapGetters(["sourceList"]),
    },
    components: {
        echarts
    }
}
</script>

<style lang="scss">
</style>